import React from 'react';
import { Layout, Menu } from 'antd';
import { useRouter } from '../utils/SimpleRouter';
import {
  DashboardOutlined,
  UploadOutlined,
  AppstoreOutlined,
  UserOutlined,
  SettingOutlined,
} from '@ant-design/icons';

const { Sider } = Layout;

const Sidebar: React.FC = () => {
  const { navigate, currentPath } = useRouter();

  const menuItems = [
    {
      key: '/',
      icon: <DashboardOutlined />,
      label: '仪表盘',
    },
    {
      key: '/upload',
      icon: <UploadOutlined />,
      label: '上传视频',
    },
    {
      key: '/platforms',
      icon: <AppstoreOutlined />,
      label: '平台管理',
    },
    {
      key: '/accounts',
      icon: <UserOutlined />,
      label: '账号管理',
    },
    {
      key: '/settings',
      icon: <SettingOutlined />,
      label: '设置',
    },
  ];

  const handleMenuClick = ({ key }: { key: string }) => {
    navigate(key);
  };

  return (
    <Sider
      width={200}
      style={{
        background: '#fff',
        borderRight: '1px solid #f0f0f0',
      }}
    >
      <div style={{ 
        height: '64px', 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'center',
        borderBottom: '1px solid #f0f0f0',
        fontSize: '18px',
        fontWeight: 'bold'
      }}>
        视频发布助手
      </div>
      <Menu
        mode="inline"
        selectedKeys={[currentPath]}
        items={menuItems}
        onClick={handleMenuClick}
        style={{ height: 'calc(100vh - 64px)', border: 'none' }}
      />
    </Sider>
  );
};

export default Sidebar;
